<template>
  <div>
    <div class="header">
      <div class="logo">
        <img src="http://img.cixi518.com/ljh_logo.jpeg" alt="default_logo" />
      </div>
    </div>
    <div class="content">
      <h1 @click="handleLogin">登陆</h1>
    </div>
  </div>
</template>
<script>
import { mapActions } from "vuex";

export default {
  name: "Login",

  data() {
    return {
      phoneNumber: "",
      password: "",
      code: "",
      loginWay: "password",
      passwordType: "password",
      phoneNumberError: "",
    };
  },
  computed: {
    loginWayObj() {
      if (this.loginWay === "password") {
        return {
          icon: "closed-eye",
          toggleMsg: "验证码登录",
        };
      }
      return {
        icon: "eye",
        toggleMsg: "密码登录",
      };
    },
    passwordIcon() {
      return this.passwordType === "password" ? "closed-eye" : "eye";
    },
  },
  methods: {
    handleLogin() {
      const data = {
        phoneNumber: this.phoneNumber,
        password: this.password,
        $router: this.$router,
        $route: this.$route,
        tok: { token: "huo" },
      };
      this.login(data);
    },
    ...mapActions({
      login: "user/login",
    }),
  },
};
</script>
<style lang="scss" scoped>
.header {
  width: 100%;
  height: 165px;
  display: flex;
  justify-content: center;
  align-items: center;
  .logo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    img {
      width: 100%;
    }
  }
}
</style>
